<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>车辆管理</el-breadcrumb-item>
      <el-breadcrumb-item>车辆维护</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>
          <el-row :gutter="100">
            <el-col :span="10"
              ><div class="grid-content bg-purple">
                <el-input placeholder="请输入内容" v-model="input1">
                  <el-button slot="append" icon="el-icon-search"
                    >搜索</el-button
                  >
                  <i slot="prefix" class="el-input__icon el-icon-loading"></i>
                </el-input></div
            ></el-col>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <el-button type="primary" @click="dialogFormVisible = true"
                  >司机登记</el-button
                >
              </div></el-col
            >
            <el-dialog title="司机登记" :visible.sync="dialogFormVisible">
              <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-form-item label="车牌号" prop="carnum">
                  <el-input
                    type="text"
                    v-model="ruleForm.carnum"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="车身颜色" prop="carcoloer">
                  <el-input
                    type="text"
                    v-model="ruleForm.carcoloer"
                    autocomplete="off"
                  ></el-input>
                </el-form-item>
                <el-form-item label="车型" prop="pass">
                  <el-radio border v-model="ruleForm.radio" label="自动挡"
                    >自动挡</el-radio
                  >
                  <el-radio border v-model="ruleForm.radio" label="手动挡"
                    >手动挡</el-radio
                  >
                </el-form-item>
                <!-- <el-form-item label="出生日期" prop="pass">
                  <div class="block">
                    <span class="demonstration"></span>
                    <el-date-picker
                      v-model="ruleForm.value1"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item> -->

                <el-form-item>
                  <el-button type="primary" @click="addcar">提交</el-button>
                  <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
              </el-form>
              <!-- <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </div> -->
            </el-dialog>
          </el-row>
        </span>
      </div>
      <div class="text item">
        <el-table :data="userlist" :border="true" style="width: 100%">
          <!-- <el-table-column label="日期" width="anto">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{
                scope.row.carManufactureDate
              }}</span>
            </template>
          </el-table-column> -->
          <el-table-column label="司机身份证号" width="anto">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.driverCard }}</el-tag>
              </div>
            </template> </el-table-column
          ><el-table-column label="司机姓名" width="anto">
            <template slot-scope="scope">
              <div slot="reference" class="name-emergencyContact">
                <el-tag size="medium">{{ scope.row.emergencyContact }}</el-tag>
              </div>
            </template> </el-table-column
          ><el-table-column label="自动or手动" width="anto">
            <template slot-scope="scope">
              <div slot="reference" class="name-wrapper">
                <el-tag size="medium">{{ scope.row.carStructure }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <div class="block">
      <el-pagination
        :page-sizes="[1, 2, 5, 10]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // // 验证身份证号的规则
    // var checkidnumber = (rule, value, callback) => {
    //   // 验证身份证号的正则表达式
    //   const regidnumber =
    //     /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/;

    //   if (regidnumber.test(value)) {
    //     // 合法的身份证号
    //     return callback();
    //   }

    //   callback(new Error("请输入合法的身份证号"));
    // };
    var checkcarnum = (rule, value, callback) => {
      callback;
      // const regcarnumber =
      //   /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/;
      // if (regcarnumber.test(value)) {
      //   return callback();
      // }
      // callback(new Error("请输入正确的车牌号"));
    };

    return {
      queryInfo: {
        // 当前的页数
        pageNum: 1,
        // 当前每页显示多少条数据
        pageSize: 2,
      },
      userlist: [],

      // value1: "",
      ruleForm: {
        carnum: "",
        carcoloer: "",
        radio: "自动挡",
        value1: "",
      },
      rules: {
        carnum: [
          { required: true, message: "请输入车牌号", trigger: "blur" },
          { validator: checkcarnum, trigger: "blur" },
        ],
        carcoloer: [
          { required: true, message: "请输入车身颜色", trigger: "blur" },
        ],
      },
      dialogFormVisible: false,

      formLabelWidth: "120px",
      input1: "",
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get("/driver/all", {});

      this.userlist = res;

      console.log(res);
    },
    addcar() {
      // 可以发起添加用户的网络请求
      const { data: res } = this.$http.post("/car/insert", {
        carNumber: this.ruleForm.carnum,
        carStructure: this.ruleForm.radio,
        carColoer: this.ruleForm.carcoloer,
      });
      console.log({
        carNumber: this.ruleForm.carnum,
        carStructure: this.ruleForm.radio,
        carColoer: this.ruleForm.carcoloer,
      });

      if (res.meta.status !== 200) {
        this.$message.error("添加用户失败！");
      }

      this.$message.success("添加用户成功！");
      // 隐藏添加用户的对话框
      this.addDialogVisible = false;
      // 重新获取用户列表数据
      this.getUserList();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
  },
};
</script>

<style>
.div {
  width: 100%;
  height: 100%;
}
.el-card__body {
  margin-top: -30px;
}
.el-pagination {
  margin-left: 15%;
}
</style>